<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>社区图书馆多功能厅预约系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/style/home.css">
</head>
<body>
<script type="text/html" id="bar1">
  {{#  if(d.state === 'INIT' || d.state === 'PASS'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="cancel">取消</a>
  {{#  } }}
  {{#  if(d.state === 'PASS'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="finish">完成</a>
  {{#  } }}
</script>
<script type="text/html" id="bar2">
  {{#  if(d.state === 'COMMENT'){ }}
  <a class="layui-btn layui-btn-xs" lay-event="comment">去评论</a>
  {{#  } }}
</script>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <ul class="layui-nav layui-bg-cyan">
      <li class="layui-nav-item"><a href="/distribution">基本介绍</a></li>
      <li class="layui-nav-item"><a href="/introduction">馆藏分布</a></li>
      <li class="layui-nav-item"><a href="/dynamic">最新动态</a></li>
      <li class="layui-nav-item"><a href="/page">馆多功能厅</a></li>
    </ul>
    <br>
    <ul class="layui-nav layui-layout-right">
      <!-- 当用户未时展示登录，注册按钮 -->
      <li class="layui-nav-item">欢迎您：<span th:text="${session.user.name}"></span></li>
      <li class="layui-nav-item  layui-this"><a href="#">个人中心</a></li>
      <li class="layui-nav-item"><a href="/logout">退出</a></li>
    </ul>
  </div>
  <div class="layui-body home-body">
    <div class="layui-container">
      <div class="layui-tab">
        <ul class="layui-tab-title">
          <li class="layui-this">个人信息</li>
          <li>预订中记录</li>
          <li>已完成预约</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <form class="layui-form" lay-filter="reader">
              <div class="layui-form-item">
                <label class="layui-form-label">读书证号</label>
                <div class="layui-input-inline">
                  <input readonly type="text" name="readerNumber" autocomplete="off"
                         class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                  <input readonly type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
              </div>
            </form>
            <form class="layui-form" lay-filter="info">
              <input class="layui-hide" name="id">
              <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                  <input type="text" name="phone" placeholder="请输入手机号" lay-verify="required" autocomplete="off"
                         class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                  <input type="text" name="email" placeholder="请输入邮箱" lay-verify="required" autocomplete="off"
                         class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                  <input id="man" type="radio" name="gender" value="男" title="男" checked>
                  <input id="woman" type="radio" name="gender" value="女" title="女">
                </div>
              </div>

              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" type="button" lay-submit lay-filter="submitInfo">立即提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>
            <form class="layui-form" lay-filter="password">
              <input class="layui-hide" name="id">
              <div class="layui-form-item">
                <label class="layui-form-label">旧密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="oldPassword" lay-verify="required" lay-reqtext="密码不能为空"
                         placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="newPassword" lay-verify="required" lay-reqtext="密码不能为空"
                         placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">二次密码</label>
                <div class="layui-input-inline">
                  <input type="password" name="newPassword2" lay-verify="required" lay-reqtext="密码不能为空"
                         placeholder="请输入密码"
                         autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="submitPassword">立即提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
              </div>
            </form>
          </div>
          <div class="layui-tab-item">
            <table id="reservation" lay-filter="reservation"></table>
          </div>
          <div class="layui-tab-item">
            <table id="finishReservation" lay-filter="finishReservation"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-footer home-footer">
    <!-- 底部固定区域 -->
    © 2021 layui.com
  </div>
</div>
<script src="/layui/layui.js"></script>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script th:inline="none">
  $.ajaxSetup({
    dataType: "json",
    contentType: "application/json",
  });
  layui.use(['table', 'form', 'layer'], function () {
    let table = layui.table;
    let form = layui.form;
    let layer = layui.layer;
    $.get("/api/user/info", function (data) {
      if (data.code === 2000) {
        form.val("reader", data.data);
        form.val("info", data.data);
      }
    })
    form.on('submit(submitInfo)', function (data) {
      const param = JSON.stringify(data.field);
      $.post("/api/system/update/info", param, function (data) {
        if (data.code === 2000) {
          layer.msg("修改成功");
        } else {
          layer.msg(data.message);
        }
      })
      return false;
    });
    form.on('submit(submitPassword)', function (data) {
      const param = JSON.stringify(data.field);
      $.post("/api/system/update/password", param, function (data) {
        if (data.code === 2000) {
          layer.msg("修改成功");
          form.val("password", {oldPassword: "", newPassword: "", newPassword2: ""});
        } else {
          layer.msg(data.message);
        }
      })
      return false;
    });
    const reservationTable = table.render({
      id: "reservationTable",
      elem: '#reservation',
      url: "/api/room/reservation/page",
      method: 'post',
      title: '预约信息表',
      cols: [[
        {type: 'checkbox', align: 'center', fixed: 'left'},
        {field: 'id', align: 'center', title: 'id', width: 50,},
        {field: 'userName', align: 'center', title: '用户姓名', width: 100,},
        {field: 'roomNumber', align: 'center', title: '房间号',},
        {field: 'startTime', align: 'center', title: '开始时间',},
        {field: 'endTime', align: 'center', title: '结束时间',},
        {
          field: 'state', title: '预约状态', align: 'center', templet: function (data) {
            switch (data.state) {
              case "INIT":
                return "申请中";
              case "PASS":
                return "通过";
              case "CANCEL":
                return "申请取消";
              case "REJECT":
                return "驳回取消";
            }
          }
        },
        {fixed: 'right', align: 'center', title: '操作', toolbar: '#bar1', width: 200}
      ]],
      page: true,
      loading: true,
      where: {
        state: 'reservation'
      },
      request: {
        pageName: 'pageNum', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      response: {
        statusCode: 2000 //重新规定成功的状态码为 200，table 组件默认为 0
      },
      parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.records//解析数据列表
        };
      }
    });
    const finishReservationTable = table.render({
      id: "finishReservationTable",
      elem: '#finishReservation',
      url: "/api/room/reservation/page",
      method: 'post',
      title: '预约信息表',
      cols: [[
        {type: 'checkbox', fixed: 'left', align: 'center',},
        {field: 'id', title: 'id', width: 50, align: 'center',},
        {field: 'userName', title: '用户姓名', width: 100, align: 'center',},
        {field: 'roomNumber', title: '房间号', align: 'center',},
        {field: 'startTime', title: '开始时间', align: 'center',},
        {field: 'endTime', title: '结束时间', align: 'center',},
        {
          field: 'state', title: '预约状态', align: 'center', templet: function (data) {
            switch (data.state) {
              case "FINISH":
                return "已结束";
              case "COMMENT":
                return "待评论";
              case "REFUSE":
                return "拒绝申请";
              case "APPROVE":
                return "已取消";
              case "OVERDUE":
                return "已过期";
            }
          }
        },
        {fixed: 'right', align: 'center', title: '操作', toolbar: '#bar2', width: 200}
      ]],
      page: true,
      loading: true,
      where: {
        state: 'finish'
      },
      request: {
        pageName: 'pageNum', //页码的参数名称，默认：page
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      response: {
        statusCode: 2000 //重新规定成功的状态码为 200，table 组件默认为 0
      },
      parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.records//解析数据列表
        };
      }
    });

    table.on('tool(finishReservation)', function (obj) {
      let data = obj.data;
      const layEvent = obj.event;
      if (layEvent === 'comment') {
        layer.prompt({
          title: '请输入对我们工作室的评论',
          area: ['400px', '150px'] //自定义文本域宽高
        }, function (value, index) {
          const parameter = {
            "reservationId": data.id,
            "roomId": data.roomId,
            "roomNumber": data.roomNumber,
            "context": value
          };
          $.post("/api/room/comment", JSON.stringify(parameter), function (data) {
            if (data.code === 2000) {
              layer.msg("处理成功")
              finishReservationTable.reload()
              reservationTable.reload()
            } else {
              layer.msg(data.message);
            }
          })
          layer.close(index);
        });
      }
    })

    table.on('tool(reservation)', function (obj) {
      let data = obj.data;
      const layEvent = obj.event;
      switch (layEvent) {
        case "cancel":
          layer.confirm('确定取消吗', function (index) {
            $.post("/api/room/reservation/cancel/" + data.id, function (data) {
              if (data.code === 2000) {
                layer.msg("处理成功")
                finishReservationTable.reload()
                reservationTable.reload()
              } else {
                layer.msg(data.message);
              }
            })
            layer.close(index);
          });

          break;
        case "finish":
          layer.confirm('你确认要完成该预定吗？请确认你已经到了使用时间！', function (index) {
            $.post("/api/room/reservation/finish/" + data.id, function (data) {
              if (data.code === 2000) {
                layer.msg("处理成功")
                finishReservationTable.reload()
                reservationTable.reload()
              } else {
                layer.msg(data.message);
              }
            });
            layer.close(index);
          });
          break;
      }
    });
  })
</script>
</body>
</html>